<template>
  <div class="y-conter">
    <div class="y-biaoge">
      <h3 class="y-bold">项目班组</h3>
      <!-- 搜索输入框部分 -->
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        label-width="100px"
      
      >
        <!-- class="demo-form-inline" -->
        <div class="l-head">
          <div class="l-head-1">
            <el-form-item label="单位名称:">
              <el-select v-model="ruleForm.company_id" placeholder="请选择">
                <el-option
                  v-for="item in input1"
                  :key="item.company_id"
                  :label="item.company_name"
                  :value="item.company_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 按钮搜和索部分 -->
          <div class="xmbz-btn">
            <div class="xmbz-btn-left">
               <el-button type="primary" @click="search(ruleForm)">搜索</el-button>
              <el-button @click="resetForm(ruleForm)">重置</el-button>
             
            </div>
            <div class="xmbz-btn-right">
            <el-button type="primary" @click="Newadditions()" >新增</el-button >
           
            </div>
          </div>
         </div>
      </el-form>
      <!-- 表格部分 -->
      <div class="xmbz-table">
      <el-table
        :border="true"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        ref="multipleTable"
        :data="currList"
        tooltip-effect="dark"
        style="width: 98%, text-align: center "
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
           show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="单位名称"
          prop="buildCompany.company_name"
           show-overflow-tooltip
          width="100"
          hight="30px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="单位类型"
          prop="buildCompany.buildCompanyType.company_type_name"
           show-overflow-tooltip
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          label="班组名称"
          prop="group_name"
           show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          label="入职时间"
          prop="group_start"
           show-overflow-tooltip
        align="center"
        ></el-table-column>
        <el-table-column
          label="离场时间"
          prop="group_end"
           show-overflow-tooltip
            align="center"
        ></el-table-column>
       
      <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!-- 分页器 -->
      <div class="y-fenye">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
import axios from "axios";
export default {
  data() {
    return {
      input1: [], //单位名称
      //搜索输入框
      ruleForm: {
        company_id: "", //单位名称
        // name: "",
        // time: "",
        // status: "",
      },
      //多选表格的复选框

      multipleSelection: [],
      // 分页
      tableData: [], //总数居
      currPage: 1, //当前页
      pageSize: 6, //每页数据量
      currList: [], //当前展示的数据数组
    };
  },
  computed: {},
  methods: {
    // 新增
    Newadditions() {
      this.$router.push({
        name: "项目班组新增",
      });
    },
    // 分页
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
      // console.log('当前页',index);
    },
    //改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      // console.log(val);
    },

    //重置按钮
    resetForm(formName) {
      console.log('formName',formName)
      for (const key in formName) {
       formName[key]=""
      }
      // this[formName] = {};
      // this.$refs[formName].resetFields();

    },
    // 新增
    // Newadditions() {
    //   this.$router.push({
    //     name: "班组管理新增",
    //   });
    // },

    //表格编辑按钮
    handleEdit(index, row) {
      // this.$router.push({
      //   name: "班组编辑新增",
      // });
      
      console.log(index, row);
      this.$router.push({
        name: "项目班组编辑",
        params: row,
      });
    },
    // 表格删除按钮弹框
    handleDelete(index, row) {
       let shanobj={}
      let shanobjarr=[]
      shanobjarr.push(row.group_id)
      shanobj.groupIds=shanobjarr
       console.log("单个删除obj",shanobj)
      http.xmbzshanchu(shanobj).then((res) => {
        // this.linput2 = res.data;
        console.log("单个删除1", res);
         http.ryglxmbz1({}).then((res) => {
      this.tableData = res.data;
      this.setCurrList(this.currPage);
     
    });

      });
   },
    //选中复选框获取下标
    handleSelectionChange(val) {
      //val 为选中数据的集合
      this.multipleSelection = val;
      let ids = [];
      this.multipleSelection.map((item) => {
        let ids = [];
        ids.push(item.key);
      });
      console.log(ids);
      console.log(val);
    },
    //搜索输入
    search(ruleForm) {
      console.log(ruleForm);
      http.ryglxmbz1(ruleForm).then((res) => {
        console.log("搜搜", res.data);
        this.tableData = res.data;
        this.setCurrList(1);
      });
      // var shuju = [];
      // for (let i = 0; i < this.tableData.length; i++) {
      //   if (this.tableData[i].name.indexOf(ruleForm.name) !== -1) {
      //     shuju.push(this.tableData[i]);
      //   }
      // }
      // console.log(shuju);
      // this.currList = JSON.parse(JSON.stringify(shuju));
      // if (ruleForm === "") {
      //   this.setCurrList(1);
      // }
    },

    //批量删除
    del() {
      for (let i = 0; i < this.tableData.length; i++) {
        const element = this.tableData[i];
        element.id = i;
      }
      if (this.multipleSelection.length == 0)
        this.$message.error("请先至少选择一项");
      this.multipleSelection.forEach((element) => {
        // forEach(元素，下标)没有返回值只用于查找
        this.tableData.forEach((e, i) => {
          if (element.id == e.id) {
            this.tableData.splice(i, 1);
          }
        });
      });
    },
  },
  //获取数据
  mounted() {
    http.ryglxmbz1({}).then((res) => {
      this.tableData = res.data;
      this.setCurrList(1);
      console.log(res.data);
    });
    //单位名称
    http.xmbzsearch({}).then((res) => {
      this.input1 = res.data;
      console.log("单位名称", res.data);
    });


 

    // axios.get("../../static/data/staff.json").then((r) => {
    //   this.tableData = r.data.staffList;
    //   console.log(this.tableData);
    //   this.setCurrList(1);
    // });
  },
};
</script>
<style scoped>
/* 大容器 */
.y-conter {
  width: 98%;
  height: 645px;
  background-color: white;
  /* overflow: hidden; */
  margin-top: 15px;
  position: relative;

 
 }
.y-bold {
  width: 100px;
  height: 30px;
  margin-top: 20px;
  margin-left: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.l-head {
 height: 80px;
}
.l-head-1 {
  width: 300px;
  height: 40px;
  margin-left: -5px;
}
.xmbz-btn {
  width: 96%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.xmbz-btn-left{
  width: 270px;
  height: 30px;
   margin-left: 25px; 
}
.xmbz-btn-right{
  width: 71px;
  height: 30px;
  /* margin-left: 25px; */
  /* margin-right: 30px; */
}
.xmbz-table{
  width: 96%;
   margin-left: 25px; 
  margin-top: 10px;
}
/* 表格 */
.y-biaoge {
  margin-top: 20px;
  margin-left: 10px;
}
/* 左边input框 */
.l-head-left {
}
/* 右侧新增导出按钮 */
.y-btn {
  height: 40px;
}
/* 所有按钮 */
.el-button {
  height: 30px;
  line-height: 0px;
}
/* 标题字体 */
.y-bold {
  font-weight: bold;
}

.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
 padding-left: 5px;
}
.el-input >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 10px;
  margin-left: 5px;
}
.el-range-editor {
  width: 160px;
  height: 30px;
  padding-left: 10px;
  margin-left: 5px;
}
.el-input >>> .el-range__icon {
  line-height: 0px;
  padding-left: 10px;
}
.el-range-editor >>> .el-input__inner {
  width: 200px;
  height: 30px;
  margin-left: 5px;
  margin-top: 10px;
}
.y-fenye {
position: absolute;
right: 2%;
bottom: 0;
  /* float: right; */
  /* margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px; */
}
</style>